<template>
  <el-drawer
    v-model="props.modelValue"
    :with-header="false"
    :size="props.width"
    :direction="props.direction"
    :close-on-click-modal="props.clickModel"
    :before-close="beforeClose"
  >
    <section class="header">
      <span class="title">{{ props.title }}</span>
      <el-icon
        class="cursor-pointer"
        :size="20"
        color="#00000073"
        @click="beforeClose"
      >
        <Close />
      </el-icon>
    </section>
    <section class="content">
      <slot name="content"></slot>
    </section>
    <footer class="text-right pt-20px">
      <slot name="footer"></slot>
    </footer>
  </el-drawer>
</template>
<script lang="ts" setup>
const emit = defineEmits(['close'])
const props = defineProps({
  modelValue: false,
  title: '',
  width: '50%',
  direction: 'rtl',
  clickModel: true
})
const beforeClose = () => {
  emit('close')
}
</script>
<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 24px 0;

  > span {
    font-size: 18px;
    font-weight: 500;
    color: #303133;
    font-family: PingFang SC, PingFang SC-500;
  }
}

.content {
  height: calc(100% - 108px);
  overflow-y: auto;
}
</style>
